@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentVm
<style>
    .layui-table-cell {
        height: auto;
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
    }
</style>
<wt:fieldset field-set-style="Simple" title="Slider">
</wt:fieldset>
    <p>The common properties of slider are:</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">Property</th>
                    <th lay-data="{field:'required', width:100}">Requird</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Control ID, generated by default according to the bound field name</td>
            </tr>
            <tr>
                <td>Field</td>
                <td><i class="layui-icon layui-icon-ok"></i></td>
                <td>Binding field, required</td>
            </tr>
            <tr>
                <td>Field1</td>
                <td><i class="layui-icon layui-icon-ok"></i></td>
                <td>secondary bound field ; If field1 is bound to a field, it is considered as range selection; Range of layui is turned on by default.</td>
            </tr>
            <tr>
                <td>Disabled</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Disabled,or not</td>
            </tr>
            <tr>
                <td>Name</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Control name, generated by default according to the bound field name</td>
            </tr>
            <tr>
                <td>LabelText</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Label content</td>
            </tr>
            <tr>
                <td>LabelWidth</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Label length, default= 80</td>
            </tr>
            <tr>
                <td>HideLabel</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Hide label,or not</td>
            </tr>
            <tr>
                <td>DefaultValue</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>The initial value of the slider,  defaults to a number. If the slider is turned on to drag the range (that is, field1 is bound), you need to assign an array to indicate the interval between the beginning and the end,such as value: [30, 60]</td>
            </tr>
            <tr>
                <td>SliderType</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Slider type, optional values: default (horizontal slider), vertical (vertical slider), default (horizontal slider)</td>
            </tr>
            <tr>
                <td>Min</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Slider min, default=0</td>
            </tr>
            <tr>
                <td>Max</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Slider max, default=100/td>
            </tr>
            <tr>
                <td>Step</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Drag step, default=positive integer 1</td>
            </tr>
            <tr>
                <td>ShowStep</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Show breakpoints or not, Default=false</td>
            </tr>
            <tr>
                <td>Tips</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Display text ,or not,  default=ture</td>
            </tr>
            <tr>
                <td>Input</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Whether to display the input box (Note: if field1 is bound to the attribute, it is forced to be invalid), click the up and down buttons of the input box,  enter or lose focus after entering any number, the slider can be changed dynamically. The default is false</td>
            </tr>
            <tr>
                <td>SliderHeight</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>The height of the slider, needs to be used with the SliderType:Vertical parameter., default=200</td>
            </tr>
            <tr>
                <td>Theme</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Theme color,  default #009688</td>
            </tr>
            <tr>
                <td>ChangeFunc</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>
                    Callback for value change<br />
                    Triggered when the slider value is changed. This callback is very important to dynamically get the current value of the slider. You can assign the resulting value to a hidden field, or do something else.<br />
                    Parameters:<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value: current value<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sliderins: current slider instance
                </td>
            </tr>
            <tr>
                <td>OnTipsFunc</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>
                    Triggered when the mouse is placed on the dot or drag slider<br />
                    The default displayed text is its corresponding value. You can also customize the prompt content.<br />
                    Parameters：<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Value: current value<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sliderins: current slider instance
                </td>
            </tr>
        </tbody>
    </table>
    <wt:quote>
        <p>Slider</p>
        <ul class="doc"></ul>
    </wt:quote>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model">
                    <wt:row items-per-row="ItemsPerRowEnum.Two">
                        <wt:slider field="Age1" step="5" show-step="true" input="true" theme="#00FF00" />
                    </wt:row>
                    <wt:row items-per-row="ItemsPerRowEnum.Two">
                        <wt:slider field="StuCount0" field1="StuCount1"
                                   input="true"
                                   on-tips-func="onTipsCallback" change-func="onChangeCallback"
                                   min="10" max="80" default-value="[40,60]" />
                    </wt:row>
                    <wt:row items-per-row="ItemsPerRowEnum.One">
                        <wt:slider field="Age2" slider-type="SliderTypeEnum.Vertical" slider-height="300" input="true" theme="#00FF00" />
                    </wt:row>
                    <wt:row items-per-row="ItemsPerRowEnum.Two">
                        <wt:slider field="StuCount2" field1="StuCount3" theme="#FF0000" />
                    </wt:row>
                    <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true" />
                        <wt:closebutton disabled="true" />
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:form vm="@@Model"&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
        &ltwt:slider field="Age1" step="5" show-step="true" input="true" theme="#00FF00" /&gt
    &lt/wt:row&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
        &ltwt:slider field="StuCount0" field1="StuCount1"
                    input="true"
                    on-tips-func="onTipsCallback" change-func="onChangeCallback"
                    min="10" max="80" default-value="[40,60]" /&gt
    &lt/wt:row&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.One"&gt
        &ltwt:slider field="Age2" slider-type="SliderTypeEnum.Vertical" input="true" theme="#00FF00" /&gt
    &lt/wt:row&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Two"&gt
        &ltwt:slider field="StuCount2" field1="StuCount3" theme="#FF0000" /&gt
    &lt/wt:row&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt
&ltscript&gt
    function onTipsCallback(value, sliderIns) {
        return '-' + value + '-';
    }
    function onChangeCallback(value, sliderIns) {
        ff.Alert(value[0] + '-' + value[1]);
    }
&lt/script&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

<script>
  layui.use('code', function () { layui.code({ about: false }) })
    layui.table.init('parse-table-demo', {
        limit: 100, page: false
    });
    function onTipsCallback(value, sliderIns) {
        return '-' + value + '-';
    }
    function onChangeCallback(value, sliderIns) {
        ff.Alert(value[0] + '-' + value[1]);
    }
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
